import Qt 4.7
import "scripts.js" as Game

Rectangle {
    id: rectangle1
    width: 360
    height: 640

    property alias hole1 : hole1
    property alias hole2 : hole2
    property alias hole3 : hole3
    property alias hole4 : hole4
    property alias hole5 : hole5
    property alias hole6 : hole6
    property alias hole7 : hole7
    property alias hole8 : hole8
    property alias scoreText : scoreText.text
    property alias livesText : livesText.text
    property int gamesPlayed : 0

    property bool newHighScore : false

    Image {
        id: image1
        x: 0
        y: 0
        width: parent.width
        height: parent.height
        source: "images/bg.jpg"
    }

    Image {
        id: homeBtn
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        height: 64
        width: 64
        z: 2
        source: "images/homebtn.png"
        opacity: 1

        MouseArea {
            anchors.fill : parent

            onPressed: parent.source = "images/homebtn2.png"
            onReleased: parent.source = "images/homebtn.png"
            onClicked: {
                Game.setState("")
            }
        }
    }

    Image {
        id: restart
        height: 64
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        sourceSize.height: 64
        sourceSize.width: 64
        width: 64
        anchors.rightMargin: 20
        anchors.right: homeBtn.left
        source: "images/restart.png"
        z: 1

        MouseArea {
            anchors.fill : parent
            onPressed: parent.source = "images/restart2.png"
            onReleased: parent.source = "images/restart.png"
            onClicked: {
                Game.newGame();
            }
        }
    }

    Image {
        id: highscore
        height: 64
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        sourceSize.height: 64
        sourceSize.width: 64
        width: 64
        anchors.left: homeBtn.right
        anchors.leftMargin: 20
        z: 1
        source: "images/highscore.png"

        MouseArea {
           anchors.fill : parent
           onPressed: parent.source = "images/highscore2.png"
           onReleased: parent.source = "images/highscore.png"
           onClicked: {
               Game.getScores();
               Game.setState("highscore")

           }
        }
    }

    Hole {
        id: hole1
        height: parent.height / 4.7
        width:  parent.width / 2.5
        x: (parent.width / 2.5) / 8
        y: (parent.height / 4.7) / 10
        idNumber: 1

    }

    Hole {
        id: hole2
        height: parent.height / 4.7
        width:  parent.width / 2.5
        x: (parent.width / 2.5) + ((parent.width / 2.5) / 8) * 3
        y: (parent.height / 4.7) / 10
        idNumber: 2
    }

    Hole {
        id: hole3
        height: parent.height / 4.7
        width:  parent.width / 2.5
        x: (parent.width / 2.5) / 8
        y: parent.height / 4.7 + (parent.height / 4.7) / 10
        idNumber: 3
    }

    Hole {
        id: hole4
        height: parent.height / 4.7
        width:  parent.width / 2.5
        x: (parent.width / 2.5) + ((parent.width / 2.5) / 8) * 3
        y: parent.height / 4.7 + (parent.height / 4.7) / 10
        idNumber: 4
    }

    Hole {
        id: hole5
        height: parent.height / 4.7
        width:  parent.width / 2.5
        x: (parent.width / 2.5) / 8
        y: (parent.height / 4.7) * 2 + (parent.height / 4.7) / 10
        idNumber: 5
    }

    Hole {
        id: hole6
        height: parent.height / 4.7
        width:  parent.width / 2.5
        x: (parent.width / 2.5) + ((parent.width / 2.5) / 8) * 3
        y: (parent.height / 4.7) * 2 + (parent.height / 4.7) / 10
        idNumber: 6
    }

    Hole {
        id: hole7
        height: parent.height / 4.7
        width:  parent.width / 2.5
        x: (parent.width / 2.5) / 8
        y: (parent.height / 4.7) * 3 + (parent.height / 4.7) / 10
        idNumber: 7
    }

    Hole {
        id: hole8
        height: parent.height / 4.7
        width:  parent.width / 2.5
        x: (parent.width / 2.5) + ((parent.width / 2.5) / 8) * 3
        y: (parent.height / 4.7) * 3 + (parent.height / 4.7) / 10
        idNumber: 8
    }

    Text {
        id: scoreText
        color: "#ffffff"
        anchors.leftMargin: 10
        anchors.bottomMargin: 10
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        font.family: "MV Boli"
        font.pixelSize: 25
    }

    Text {
        id: livesText
        color: "#ffffff"
        anchors.rightMargin: 10
        anchors.bottomMargin: 10
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        font.pixelSize: 25
        font.family: "MV Boli"
    }

    Rectangle {
        id: rectangle2
        color: "#ffffff"
        opacity: 0
        anchors.left: hole1.left
        anchors.top: hole1.top
        anchors.right: hole2.right
        anchors.bottom: hole7.bottom

        Text {
            id: title
            text: ""
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.top: parent.top
            opacity: 0
            font.pixelSize: 25
        }

        Text {
            id: text2
            text: ""
            anchors.topMargin: 80
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.top: parent.top
            opacity: 0
            font.pixelSize: 23
        }



    }
    states: [
        State {
            name: "gameOver"

            PropertyChanges {
                target: rectangle2
                color: "#a0000000"
                radius: 61
                visible: true
                opacity: 1
            }

            PropertyChanges {
                target: title
                color: "#ffffff"
                text: "Game over!"
                opacity: 1
            }

            PropertyChanges {
                target: text2
                color: "#ffffff"
                text: "You got to high scores list!"
                opacity: 1
            }
        },
        State {
            name: "gameOver1"
            PropertyChanges {
                target: rectangle2
                color: "#a0000000"
                radius: "61"
                opacity: "1"
            }

            PropertyChanges {
                target: title
                color: "#ffffff"
                text: "Game over!"
                opacity: "1"
            }

            PropertyChanges {
                target: text2
                color: "#ffffff"
                text: "You didn't get new high score!"
                opacity: "1"
            }

        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "gameOver"
            SequentialAnimation {
                ScriptAction {
                    script: {
                       Game.saveHighScore();
                    }
                }

            }

        }
    ]

}
